<template>
  <a-drawer
    title="计划详情"
    placement="right"
    :closable="false"
    :visible="visible"
    @close="onClose"
    width='50%'
    :destroyOnClose='true'
  >
    <a-spin :spinning='spinning'>
      <a-descriptions title="订单信息">
        <a-descriptions-item label="排产编号">
          {{planData.planCode}}
        </a-descriptions-item>
        <a-descriptions-item label="合同编号">
          {{planData.orderId}}
        </a-descriptions-item>
        <a-descriptions-item label="产品名称">
          {{planData.productName}}
        </a-descriptions-item>
        <a-descriptions-item label="产线名称">
          {{planData.linesName}}
        </a-descriptions-item>
        <a-descriptions-item label="计划数量">
          {{planData.productCount}}
        </a-descriptions-item>
        <a-descriptions-item label="生产数量">
          {{planData.successCount}}
        </a-descriptions-item>
      </a-descriptions>
      <a-tabs default-active-key="1">
        <a-tab-pane key="1" tab="工作中心">
          <work-center :plan-code='planCode'/>
        </a-tab-pane>
        <a-tab-pane key="2" tab="投料记录">
          <devote-mat :plan-code='planCode'/>
        </a-tab-pane>
        <a-tab-pane key="3" tab="报工记录">
          Tab 3
        </a-tab-pane>
        <a-tab-pane key="4" tab="派工记录">
          Tab 3
        </a-tab-pane>
        <a-tab-pane key="5" tab="上岗记录">
          Tab 3
        </a-tab-pane>
        <a-tab-pane key="6" tab="实时余料">
          Tab 3
        </a-tab-pane>
        <a-tab-pane key="7" tab="领料记录">
          Tab 3
        </a-tab-pane>
        <a-tab-pane key="8" tab="退料记录">
          Tab 3
        </a-tab-pane>
      </a-tabs>
    </a-spin>
  </a-drawer>
</template>

<script>
import { detail } from '@/api/plan/playday'
import workCenter from './work-center'
import devoteMat from './devote-mat'
export default {
  name: 'index',
  components: {
    workCenter,
    devoteMat
  },
  data() {
    return {
      visible: false,
      spinning: false,
      planData: {},
      planCode: ''
    }
  },
  methods: {
    init(row){
      this.visible = true
      this.spinning = true
      this.planCode = row.planCode
      detail(row.id).then(res => {
        this.planData = Object.assign({},res.data,this.planData)
      }).catch(err => {
        this.$message.error(err.msg)
      }).finally(_ => {
        this.spinning = false
      })
    },
    onClose(){
      this.visible = false
      this.planData = {}
    }
  }
}
</script>

<style scoped>

</style>